import QtQuick 1.1
import StarMenu 1.0
import com.nokia.meego 1.1

Item {
    id: menu1

    StarMenu {
        id: starMenu
        objectName: "Menu1"
        anchors.fill: parent
        smooth: true
        radiusH: 100
        radiusV: 100
        starCenterVisible: true
        visualParent: main
        color: Qt.rgba(0, 0, 0, 0.5)


        center.x: main.width>>2
        center.y: main.height>>1


        Column {
            id: columnItem
            property real ppx
            property real ppy
            x: main.width-width
            y: main.height-height

            Row {
                spacing: 15
                Text {id:text1;text: "color";font {bold: true; pixelSize: 30;}color: "#ffffff"}
                Button {
                    text: "random color"
                    onClicked: starMenu.color = Qt.rgba(Math.random (100),
                                                        Math.random (100),
                                                        Math.random (100),
                                                        0.6 )
                }
            }
            Row {
                id: centerx
                Text {text: "center.x"; font {bold: true; pixelSize: 30;} color: "#ffffff"}
                Slider {
                    id: sliderx
                    valueIndicatorVisible: true
                    minimumValue:0; maximumValue:main.width; width:250; height: 40
                    stepSize: 1
                    value: columnItem.ppx
                    onValueChanged: starMenu.center.x = value
                }
            }
            Row {
                id: centery
                Text {text: "center.y"; font {bold: true; pixelSize: 30;} color: "#ffffff"}
                Slider {
                    id: slidery
                    valueIndicatorVisible: true
                    minimumValue:0; maximumValue:main.height; width:250; height: 40
                    stepSize: 1
                    value: columnItem.ppy
                    onValueChanged: starMenu.center.y = value
                }
            }
            Row {
                Text {
                    text: "rotation"
                    font {bold: true; pixelSize: 30}
                    color: "#ffffff"
                }
                Slider {
                    valueIndicatorVisible: true
                    minimumValue:0; maximumValue:360; width:250
                    Component.onCompleted: value = starMenu.rotation
                    onValueChanged: starMenu.rotation = value
                }
            }
            Row {
                Text {
                    text: "starting angle"
                    font {bold: true; pixelSize: 30}
                    color: "#ffffff"
                }
                Slider {
                    valueIndicatorVisible: true
                    minimumValue:0; maximumValue:360; width:250
                    Component.onCompleted: value = 0
                    onValueChanged: starMenu.startingAngle = value
                }
            }
            Row {
                Text {
                    text: "end angle"
                    font {bold: true; pixelSize: 30}
                    color: "#ffffff"
                }
                Slider {
                    valueIndicatorVisible: true
                    minimumValue:0; maximumValue:360; width:250
                    Component.onCompleted: value = 360
                    onValueChanged: starMenu.endAngle = value
                }
            }
        }


        onStarMenuOpening: {
            columnItem.ppx=center.x; columnItem.ppy=center.y;
            textRect.z = starMenu.z;
            textRect.text =
                    "<font size=4><strong>Root StarMenu with 8 StarItems containing an Image{} component.</strong><br><br>"+
                    "The \"Qt\" image is a StarItem with a StarMenu child.<br>"+
                    "Center star polygon has as many spikes as the number of StarItems, "+
                    "it can be disabled by setting <strong>starCenterVisible</strong> to false.<br>"+
                    "Default behaviour is to open the menu where user click/tap, but its also possible to define its coordinates."+
                    "Clicking on the center of the current open menu, will close it and goes "+
                    "back to previous. It's possible to click on the center of the first menu to close all.<br></font>"
        }

        StarItem {
            width: 64; height: 64

            onClicked: console.log("HOVER ITEM STARITEM TEEXT CLICKED");

            Image {
                anchors.fill: parent; smooth: true
                fillMode: Image.Stretch
                source: "0007.png"
            }
        }

        StarItem {
            width: 64; height: 64

            Image {
                anchors.fill: parent; smooth: true
                fillMode: Image.Stretch
                source: "0013.png"
            }
        }
        StarItem {
            width: 64; height: 64

            Image {
                anchors.fill: parent; smooth: true
                fillMode: Image.Stretch
                source: "0014.png"
            }
        }

        StarItem {
            width: 64; height: 64

            Image {
                anchors.fill: parent; smooth: true
                fillMode: Image.Stretch
                source: "0008.png"
            }
        }
        StarItem {
            width: 64; height: 64

            Image {
                anchors.fill: parent; smooth: true
                fillMode: Image.Stretch
                source: "0009.png"
            }
        }


        StarItem {
            width: 64; height: 64

            Image {
                anchors.fill: parent; smooth: true
                fillMode: Image.Stretch
                source: "0010.png"
            }

        }

        StarItem {
            width: 64; height: 64

            Image {
                id: image
                anchors.fill: parent; smooth: true
                fillMode: Image.Stretch
                source: "qt.png"
            }

            StarMenu {
                id: starMenu2
                objectName: "Menu2"
                anchors.fill: parent; smooth: true
                radiusH: 80
                radiusV: 60
                parentVisible: true
//                startingAngle: 0
//                endAngle: 360
                StarItem {
                    width: 64; height: 64

                    Image {
                        anchors.fill: parent; smooth: true
                        fillMode: Image.Stretch
                        source: "0001.png"
                    }
                }
                StarItem {
                    width: 64; height: 64

                    Image {
                        anchors.fill: parent; smooth: true
                        fillMode: Image.Stretch
                        source: "0007.png"
                    }

                }
                StarItem {
                    width: 64; height: 64

                    Image {
                        anchors.fill: parent; smooth: true
                        fillMode: Image.Stretch
                        source: "0008.png"
                    }
                }
                StarItem {
                    width: 64; height: 64

                    Image {
                        anchors.fill: parent; smooth: true
                        fillMode: Image.Stretch
                        source: "qt.png"
                    }
                    StarMenu {
                        id: starMenu3
                        objectName: "Menu3"
                        anchors.fill: parent; smooth: true
                        radiusH: 80
                        radiusV: 100

                        StarItem {
                            width: 64; height: 64

                            Image {
                                anchors.fill: parent; smooth: true
                                fillMode: Image.Stretch
                                source: "0011.png"
                            }
                        }
                        StarItem {
                            width: 64; height: 64

                            Image {
                                anchors.fill: parent; smooth: true
                                fillMode: Image.Stretch
                                source: "0012.png"
                            }
                        }
                        StarItem {
                            width: 64; height: 64

                            Image {
                                anchors.fill: parent; smooth: true
                                fillMode: Image.Stretch
                                source: "0013.png"
                            }
                        }
                        StarItem {
                            width: 64; height: 64

                            Image {
                                anchors.fill: parent; smooth: true
                                fillMode: Image.Stretch
                                source: "0014.png"
                            }
                        }
                    }

                }


                StarItem {
                    width: 64; height: 64

                    Image {
                        anchors.fill: parent; smooth: true
                        fillMode: Image.Stretch
                        source: "0010.png"
                    }

                }

            }
        }


        StarItem {

            width: 64; height: 64

            Image {
                anchors.fill: parent; smooth: true
                fillMode: Image.Stretch
                source: "0001.png"
            }
        }




    }


}

